<template>
    <div id="live-windows">
        <el-row>
            <el-col :span="(videourls.length <= 1) ? 24 : 12">
                <video width="100%" id="videoElement0" controls autoplay muted></video>
            </el-col>
            <el-col :span="12" v-show="videourls.length >= 2">
                <video width="100%" id="videoElement1" controls autoplay muted></video>
            </el-col>
        </el-row>
        <el-row v-show="videourls.length > 2">
            <el-col :span="12">
                <video width="100%" id="videoElement2" controls autoplay muted></video>
            </el-col>
            <el-col :span="12">
                <video width="100%" id="videoElement3" controls autoplay muted></video>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import flvjs from "flv.js";

export default {
    data() {
        return {
            // videourls: ["http://1011.hlsplay.aodianyun.com/demo/game.flv", "http://img.ksbbs.com/asset/Mon_1704/15868902d399b87.flv"],
            videourls: [],
            videoPlayerList: [],
        }
    },
    methods: {
        // 向后端请求播放地址
        getVideoUrls() {
            this.$axios.get("/video/play")
            .then((response)=>{
                console.log(response.data);
                this.videourls = response.data.o;
                this.setVideoListLength();
                this.startPlay();
            })
            .catch((error)=>{
                console.log(error)
            })
        },
        startPlay () {
            for(var i=0; i<this.videourls.length; i++) {
                this.createFlvPlayer(i, this.videourls[i]);
            }
        },
        // 将Flv播放器绑定都videoElement元素上去，播放videoUrl
        createFlvPlayer(index, videoUrl) {
            if (flvjs.isSupported()) {
                var flvPlayer = flvjs.createPlayer({
                    type: "flv",
                    isLive: true,
                    hasVideo: true,
                    hasAudio: false,
                    enableWorker: true,
                    cors: true,
                    url: videoUrl,
                });
                this.videoPlayerList.push(flvPlayer);
                const videoPlayerElement = document.getElementById("videoElement" + index);
                flvPlayer.attachMediaElement(videoPlayerElement);
                flvPlayer.load();
                flvPlayer.play();
                flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
                    console.log("视频断流...");
                    console.log(errorType);
                    console.log(errorDetail);
                    console.log(errorInfo);
                    if(flvPlayer) {
                        flvPlayer.pause();
                        flvPlayer.unload();
                        flvPlayer.detachMediaElement();
                        flvPlayer.destroy();
                        flvPlayer = null;
                    }
                })
            }
        },
        // 停止混流播放并移除直播流抓取
        pausemix() {
            for(var key in this.videoPlayerList) {
                var flvPlayer = this.videoPlayerList[key];
                if(flvPlayer != null) {
                    flvPlayer.pause();
                    flvPlayer.unload();
                    flvPlayer.detachMediaElement();
                    flvPlayer.destroy();
                    flvPlayer = null;
                }
            }
            this.videoPlayerList = [];
        },
        // 向父组件传参this.videourls.length，以动态改变布局
        setVideoListLength() {
            this.$emit("setVideoListLength", this.videourls.length);
        },
    },
    mounted() {
        this.getVideoUrls();
    },
    beforeDestroy() {
        this.pausemix();
    }

};
</script>

<style scoped>
.el-row {
    margin-left: 5px;
    margin-right: 10px;
}
</style>